import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
// import { CommonEvent } from '@tarojs/components/types/common'
import { AtImagePicker, AtButton } from 'taro-ui'
import { View } from '@tarojs/components'
import CommonForm from '../../components/common-form'

class formPreStep1 extends Component {

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  public state: any = {
    relationsData: [{
      type: 'radio',
      title: '您与患儿的关系', // 其实没用到
      option: [
        { label: '父亲', value: 1 },
        { label: '母亲', value: 2 },
        { label: '其他', value: 3 }
      ],
      value: 0, // 隐藏了
      relations: [], // 空数组
      relation: 3 // relation === value 时 触发 其他组件
    }],
    baseInfo: [
      {
        type: 'input',
        title: '患儿姓名',
        value: ''
      },
      {
        type: 'select',
        title: '性别',
        option: ['请选择', '男孩', '女孩'],
        value: 0
      },
      {
        type: 'dateSelect',
        title: '出生日期',
        value: 0
      },
      {
        type: 'select',
        title: '患儿户口状态',
        option: ['请选择', '和爸爸在一起', '和妈妈在一起', '和父母在一起', '和父母都不在一起', '无户口'],
        value: 0
      },
    ],
    famliyInfo: [
      {
        type: 'input',
        subType: 'number',
        title: '患儿是家庭第几个孩子',
        value: ''
      },
      {
        type: 'input',
        subType: 'number',
        title: '患儿家庭共几个孩子',
        value: ''
      },
      {
        type: 'select',
        title: '患儿血型',
        option: ['请选择', 'A型', 'B型', 'AB型', 'O型', '不详'],
        value: 0
      },
      {
        type: 'select',
        title: '父亲血型',
        option: ['请选择', 'A型', 'B型', 'AB型', 'O型', '不详'],
        value: 0
      },
      {
        type: 'select',
        title: '母亲血型',
        option: ['请选择', 'A型', 'B型', 'AB型', 'O型', '不详'],
        value: 0
      },
      {
        type: 'select',
        title: '患儿疾病名称',
        // 	先天性胆道闭锁（葛西术后）
        // 	先天性胆道闭锁（未做葛西）
        option: ['请选择', '胆汁淤积性肝病', '阿拉基综合征（Alagille综合征）', '进行性家族性肝内胆汁淤积症（PFIC）', '肝豆状核变性', '糖原累积症', '胆汁酸合成障碍', '酪氨酸血症', '高同型半胱氨酸血症', '丙酸血症', '尿素循环障碍性疾病', '原发性高草酸尿症', '枫糖尿症', '自身免疫性肝炎', '病毒性肝炎', '肝母细胞瘤', '先天性肝纤维化', '其他'],
        value: 0
      },
      {
        type: 'input',
        title: '患儿曾就医医院',
        value: ''
      },
    ],
    picInfo: {
      type: 'imgUploader',
      title: '相关就诊资料',
      files: []
    },
    genePicInfo: {
      type: 'imgUploader',
      title: '基因诊断资料',
      files: []
    },
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  config: Config = {
    navigationBarTitleText: '患儿基本信息'
  }

  render () {
    const { picInfo, genePicInfo } = this.state;
    return (
      <View className='page'>        
        <View className='doc-body'>
          {/* 您与患儿的关系 */}
          <View className='panel'>
            <View className='panel__title'>您与患儿的关系</View>
            <View className='panel__content no-padding'>
              <CommonForm 
                data={this.state.relationsData}
              />
            </View>
          </View>
          {/* 患儿的基本信息 */}
          <View className='panel'>
            <View className='panel__title'>患儿的基本信息</View>
            <View className='panel__content no-padding'>
              <CommonForm 
                data={this.state.baseInfo}
              />
            </View>
          </View>
          {/* 患儿家庭情况 */}
          <View className='panel'>
            <View className='panel__title'>患儿的家庭情况及病史</View>
            <View className='panel__content no-padding'>
              <CommonForm
                data={this.state.famliyInfo}
              />
            </View>
          </View>
          {/* 相关就诊资料 图片上传 */}
          <View className='panel'>
            <View className='panel__title'>相关就诊资料</View>
            <View className='panel__content no-padding'>
              <AtImagePicker
                files={picInfo.files}
                onChange={(e) => {
                  this.setState({
                    picInfo: {
                      files: e
                    }
                  })
                }}
              />
            </View>
          </View>
          {/* 基因诊断资料 图片上传 */}
          <View className='panel'>
            <View className='panel__title'>基因诊断资料</View>
            <View className='panel__content no-padding'>
              <AtImagePicker
                files={genePicInfo.files}
                onChange={(e) => {
                  this.setState({
                    genePicInfo: {
                      files: e
                    }
                  })
                }}
              />
            </View>
          </View>
          {/* 提交按钮 到下一步 */}
          <AtButton 
            type='primary' 
            onClick={()=>{
              Taro.redirectTo({
                url: '/pages/formPre/step2'
              })
            }}
          >下一步</AtButton>
        </View>
      </View>
    )
  }
}

export default formPreStep1 as ComponentClass<PageOwnProps, PageState>
